<template>
  <a-layout-sider
      theme="light"
      :trigger="null"
      width="100%"

      :style="{'height': h, 'overflow': 'auto'}"
      v-model:collapsed="collapsed"
      :collapsed-width="150"
                  collapsible>
    <work-spaces/>
    <!--    <div class="drag-bar" ref="dragBar"></div>-->
  </a-layout-sider>
</template>

<script lang="ts">
import WorkSpaces from "./WorkSpaces.vue";
import {ref} from "vue";

export default {
  name: "MenuSide",
  props: {
    paneSize: Number
  },

  components: {
    WorkSpaces
  },

  data() {
    return {
      w: "100%",
      h: document.documentElement.clientHeight - 46 + "px",
      collapsed: ref<boolean>(false)
    }
  },

  methods: {},
  watch: {

    paneSize: {
      immediate: true,
      handler(n: Number): void {
        this.w = "100%";
        // 设置 collapsed true
        this.collapsed = n / 100 * document.documentElement.clientWidth < 150;
      }
    },
    h: {
      immediate: true,
      handler(nh: string) {
        this.h = nh;
      }
    },
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.w = this.paneSize / 100 * document.documentElement.clientWidth + "px";
      this.h = document.documentElement.clientHeight - 46 + "px";
    });
  }


}
</script>


<style scoped>
.drag-bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 3px;
}

.drag-bar:hover {
  cursor: col-resize;
  border-right: 3px solid;

}
</style>